const form = layui.form


let query = {
    pagenum: 1,	//是	int	页码值
    pagesize: 2,	//是	int	每页显示多少条数据
    cate_id: '',		//否 string	 文章分类的 Id
    state: ''		//否 string	 文章的状态，可选值有：已发布、草稿
}
// 图书列表函数
function getArtList() {
    axios.get('/my/article/list', {
        params: query,
    })
        .then((res) => {
            console.log(res);
            let newArr = res.data.data.map(item => {
                return `
                    <tr>
                        <td>${item.title}</td>
                        <td>${item.cate_name}</td>
                        <td>${item.pub_date}</td>
                        <td>${item.state}</td>
                        <td>
                        <button type="button" data-id="${item.Id}" class="layui-btn layui-btn-xs btn_edit">编辑</button>
                        <button type="button" data-id="${item.Id}" class="layui-btn layui-btn-danger layui-btn-xs btn_delete">删除</button>
                        </td>
                    </tr>
                `
            }).join('')
            $('#list').html(newArr)
            // console.log(res.data.total)
            renderPage(res.data.total)
        })
}
getArtList()

// 获取分类的文章列表数据，填充到分类的下拉框
axios.get('/my/article/cates').then(res => {
    let newArr = res.data.data.map(item => {
        return `<option value="${item.Id}">${item.name}</option>`
    }).join('')
    // append写法
    // $('#cateSelect').append(newArr)
    // html写法
    $('#cateSelect').html('<option value="">所有分类</option>' + newArr)
    // 下拉单渲染
    form.render()
})


// 筛选
$('#form').on('submit', function (e) {
    e.preventDefault()

    query.cate_id = $('#cateSelect').val()
    query.state = $('#stateSelect').val()
    // 筛选的时候，每次都是第一页
    query.pagenum = 1

    getArtList()
})


// 分页
const laypage = layui.laypage
function renderPage(count) {
    laypage.render({
        elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
        count,//数据总数，从服务端得到
        limit: query.pagesize,
        limits: [1, 2, 3, 5, 10],
        curr: query.pagenum,
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],

        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr) //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            query.pagenum = obj.curr
            query.pagesize = obj.limit
            //首次不执行
            if (!first) {
                getArtList()
            }
        }
    })
}

// 删除功能
const layer = layui.layer
$('#list').on('click', '.btn_delete', function () {
    let id = $(this).attr('data-id')
    console.log(id)

    layer.confirm(
        '确认删除文章吗？',
        { icon: 3, title: '提示' },
        function (index) {
            axios.get('/my/article/delete/' + id).then((res) => {
                console.log(res)
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                // 删除成功
                // !解决删除bug代码
                // 根据删除按钮的个数判断
                if ($('.btn_delete').length === 1) {
                    // 加载上一页数据
                    query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1
                }
                layer.msg(res.data.message)
                layer.close(index)
                // 重新渲染文章列表
                getArtList()
            })
        }
    )
})